@extends('admin.components.website-layout')

@section('pageContainer')


    <!-- BEGIN PAGE CONTAINER-->

    <div class="container-fluid">

        <!-- BEGIN PAGE HEADER-->

        <div class="row-fluid">

            <div class="span12">

                <!-- BEGIN PAGE TITLE & BREADCRUMB-->

                <h3 class="page-title">

                    分类标签管理 <small></small>

                </h3>

                <ul class="breadcrumb">

                    <li>

                        <i class="icon-home"></i>

                        <a href="">分类标签管理</a>

                        <i class="icon-angle-right"></i>

                    </li>

                    <li><a href="#">分类标签</a></li>

                    <li class="pull-right no-text-shadow">

                        <div id="dashboard-report-range" class="dashboard-date-range tooltips no-tooltip-on-touch-device responsive" data-tablet="" data-desktop="tooltips" data-placement="top" data-original-title="Change dashboard date range">

                            <i class="icon-calendar"></i>

                            <span></span>

                            <i class="icon-angle-down"></i>

                        </div>

                    </li>

                </ul>

                <!-- END PAGE TITLE & BREADCRUMB-->

            </div>

        </div>

        <!-- END PAGE HEADER-->

        <div id="dashboard">

            <div class="tabbable tabbable-custom boxless">

                <div class="portlet box blue">

                    <div class="portlet-title">

                        <div class="caption"><i class="icon-reorder"></i>新增分类标签</div>

                        <div class="tools">

                            <a href="" class="collapse"></a>

                        </div>

                    </div>

                    <div class="portlet-body form">

                    @include('admin.components.warn-label')

                    <!-- BEGIN FORM-->

                        <form action="" class="form-horizontal" method="post" id="function_form">
                            {{ csrf_field() }}

                            <h3 class=""></h3>

                            <div class="row-fluid">

                                <div class="control-group">

                                    <label class="control-label">选择主类标签</label>

                                    <div class="controls">

                                        <select class="span4 select2_category" data-placeholder="主类" tabindex="1" name="super_tag_id" id="article-tag">

                                            <option value=""></option>
                                            @foreach( $tags as $tag )
                                                <option value="{{ $tag->id }}" >{{  $tag->name }}</option>
                                            @endforeach

                                        </select>

                                    </div>

                                </div>

                                <div class="control-group">

                                    <label class="control-label">子类标签名称</label>

                                    <div class="controls">

                                        <input type="text" class="m-wrap span4"
                                               name="name" >

                                    </div>

                                </div>

                                <div class="control-group">

                                    <label class="control-label">序号</label>

                                    <div class="controls">

                                        <input type="number" class="m-wrap span1"
                                               name="sort" >

                                    </div>

                                </div>


                            </div>

                            <!--/row-->


                            <div class="form-actions">

                                <button type="submit" class="btn blue" disabled><i class="icon-ok"></i> 确认提交</button>

                                <button type="reset" class="btn" style="float: right">清空</button>


                            </div>

                        </form>

                        <!-- END FORM-->

                    </div>

                </div>

                <div class="portlet box green">

                    <div class="portlet-title">

                        <div class="caption"><i class="icon-reorder"></i>现有分类标签</div>

                        <div class="tools">

                            <a href="" class="collapse"></a>

                        </div>

                    </div>

                    <div class="portlet-body">


                        <h3 class=""></h3>

                        <div class="row-fluid">

                            <div class="span12">


                                <!-- BEGIN SAMPLE TABLE PORTLET-->

                                <table class="table table-striped table-bordered table-advance table-hover" id="sort_table">

                                    <thead>

                                    <tr>

                                        <th><i class="icon-briefcase"></i> 分类标签名称</th>

                                        <th class="hidden-phone"><i class="icon-user"></i> 所属主类</th>

                                        <th class="hidden-phone"><i class="icon-user"></i> 序号</th>


                                        <th>操作</th>

                                        <th></th>

                                    </tr>

                                    </thead>

                                    <tbody>

                                    @foreach( $tags as $tag )

                                    <tr>

                                        <td class="highlight f-name">

                                            <div class="success"></div>

                                            <a href="#">{{ $tag->name }}</a>

                                        </td>

                                        <td class="f-remark"></td>
                                        <td class="f-remark"></td>

                                        <td class="f-remark"></td>
                                        {{--<td class="f-remark"></td>--}}

                                        {{--<td>--}}
                                            {{--<a data-toggle="modal" href="#model_editor" data-href="{{  'type-tag/'.$tag->id.'/edit'  }}" class="btn mini purple editor-trigger">--}}
                                                {{--<i class="icon-edit"></i> 修改--}}
                                            {{--</a>--}}
                                            {{--<form action="{{  'type-tag/'.$tag->id  }}" style="display: inline" method="post">--}}
                                                {{--{{ csrf_field() }}--}}
                                                {{--{{ method_field('DELETE') }}--}}
                                                {{--<button type="submit" class="btn mini black del-line"><i class="icon-trash"></i> 删除</button>--}}
                                            {{--</form>--}}
                                        {{--</td>--}}

                                    </tr>

                                        @foreach( $tag->tags()->orderBy('sort','ASC')->get() as $sub_tag )
                                            <tr>

                                                <td class="highlight f-name">

                                                    <div class="success"></div>

                                                    <a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ $sub_tag->name }}</a>

                                                </td>

                                                <td class="f-remark">{{ $tags->find((int) $sub_tag->super_tag_id)->name  }}</td>
                                                <td class="f-remark">{{  $sub_tag->sort  }}</td>
                                                <td>
                                                    <a data-toggle="modal" href="#model_editor" data-href="{{  'type-tag/'.$sub_tag->id.'/edit'  }}" class="btn mini purple editor-trigger">
                                                        <i class="icon-edit"></i> 修改
                                                    </a>
                                                    <form action="{{  'type-tag/'.$sub_tag->id  }}" style="display: inline" method="post">
                                                        {{ csrf_field() }}
                                                        {{ method_field('DELETE') }}
                                                        <button type="submit" class="btn mini black del-line"><i class="icon-trash"></i> 删除</button>
                                                    </form>
                                                </td>

                                            </tr>
                                            @endforeach

                                    @endforeach

                                    </tbody>

                                </table>

                                <!-- END SAMPLE TABLE PORTLET-->

                                {{-- Model Begin --}}

                                <div id="model_editor" class="modal hide fade" tabindex="-1" data-focus-on="input:first">

                                    <div class="modal-header">

                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>

                                        <h3>修改分类标签</h3>

                                    </div>


                                    <div class="modal-body">

                                        <form action="" class="form-horizontal" method="post" id="editor-form">
                                            {{ method_field('PATCH') }}
                                            {{ csrf_field() }}

                                            <h3 class=""></h3>

                                            <div class="row-fluid">

                                                <div class="control-group">

                                                    <label class="control-label">选择主类标签</label>

                                                    <div class="controls">

                                                        <select class="span4 select2_category" data-placeholder="主类" tabindex="1" name="super_tag_id" id="edit-article-tag">

                                                            <option value=""></option>
                                                            @foreach( $tags as $tag )
                                                                <option value="{{ $tag->id }}" >{{  $tag->name }}</option>
                                                            @endforeach

                                                        </select>

                                                    </div>

                                                </div>

                                                <div class="control-group">

                                                    <label class="control-label">子类标签名称
                                                    </label>

                                                    <div class="controls">

                                                        <input type="text"
                                                               class="m-wrap span6"
                                                               name="name"
                                                               id="editor_name"
                                                        >

                                                    </div>

                                                </div>

                                                <div class="control-group">

                                                    <label class="control-label">序号</label>

                                                    <div class="controls">

                                                        <input type="number" class="m-wrap span6"
                                                               name="sort" >

                                                    </div>

                                                </div>



                                            </div>

                                            <!--/row-->

                                        </form>


                                    </div>

                                    <div class="modal-footer">

                                        <button type="button" data-dismiss="modal" class="btn"><i class="icon-times"></i> 取消</button>

                                        <button class="btn green" type="submit" form="editor-form"><i class="icon-ok"></i> 提交修改</button>

                                    </div>

                                </div>

                                {{-- Model End --}}

                            </div>

                        </div>

                        <!--/row-->


                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- END PAGE CONTAINER-->

@endsection

@section('pluginStyle')
    <link rel="stylesheet" type="text/css" href="/at/media/css/select2_metro.css">
    <link rel="stylesheet" type="text/css" href="/at/media/css/bootstrap-fileupload.css" />

@endsection


@section('pluginScript')
    <script type="text/javascript" src="/at/media/js/select2.min.js"></script>
    <script type="text/javascript" src="/at/media/js/bootstrap-fileupload.js"></script>
    <script src="/at/media/js/form-samples.js"></script>
    <script src="/at/media/js/form-components.js"></script>
    {{--<script src="/at/media/js/submit-block.js"></script>--}}
    <script src="/at/media/js/jquery.validate.min.js"></script>
    <script src="/at/media/js/block-and-unblock.js"></script>
    <script src="/at/media/js/jquery.form.js"></script>

    <script>

        $(function () {

            var formEditor = $('#editor-form');

            function addLoading() {
                if (App) {
                    App.blockUI($('#editor-form'));
                    $('#model_editor .blockElement').css({"left":"40%","top":"40%","position":"absolute"});
//                    if ($('.modal')) App.blockUI($('.modal'));

                } else {
                    console.log('Please use after App.js initialized')
                }
            }
            // 修改数据
            $('.dataTable').delegate('.editor-trigger','click',function () {
                addLoading();

                $.ajax({
                    method: "GET",
                    url: $(this)[0].dataset.href,
                }).done(function(data){
                    for (var k in data) {
                        console.log(k+'=>'+data[k]);

                        if (k === 'thumb' || k === 'banner' ) continue;
                        if (formEditor[0][k]) formEditor[0][k].value = data[k];
                    }
                    formEditor[0].action = 'type-tag/' + data.id;

//                    $('#edit-content').html(data['content']);

                    $('#edit-article-tag').val(data['super_tag_id']).trigger('change'); //默认第一个

                    if (App) {

                        App.unblockUI($('#editor-form'));

                    } else {
                        console.log('Please use after App.js initialized');
                    }

                }).fail(function(){
                    console.log('Failed get temple data');
                    if (App) {

                        App.unblockUI($('#editor-form'));

                    } else {
                        console.log('Please use after App.js initialized');
                    }
                })
            });


        });
    </script>

    <script>
        $(function () {
            var form1 = $('#function_form');
            $(".control-group.success input").css("color","#333");
            $(".control-group.success .control-label").css("color","#333");
            form1.validate({
                submitHandler:function(form1){

                    if (App) {
                        App.blockUI($('.portlet'));
                        if ($('.modal')) App.blockUI($('.modal'));
                    } else {
                        console.log('Please use after App.js initialized')
                    }
                    form1.ajaxSubmit();


                },
                errorElement: 'span', //default input error message container
                errorClass: 'help-inline', // default input error message class
                focusInvalid: false, // do not focus the last invalid input
                ignore: "",
                rules: {

                    super_tag_id: {
                        required: true,
                    },
                    name: {
                        required: true,
                    },

                },
                messages:{
                    super_tag_id: {
                        required: '请选择主类标签',
                    },

                    name: {
                        required: '子类标签名称不得为空',
                    },
                },
                highlight: function (element) { // hightlight error inputs
                    $(element)
                            .closest('.help-inline').removeClass('ok'); // display OK icon
                    $(element)
                            .closest('.control-group').removeClass('success').addClass('error'); // set error class to the control group
                },
                unhighlight: function (element) { // revert the change dony by hightlight
                    $(element)
                            .closest('.control-group').removeClass('error'); // set error class to the control group
                },
                success: function (label) {
                    label
                            .addClass('valid').addClass('help-inline ok') // mark the current input as valid and display OK icon
                            .closest('.control-group').removeClass('error').addClass('success'); // set success class to the control group
                }
            });
        });
        !function($){
            $('.editor-trigger').click(function(e){
                var editorForm = $('#editor-form');
                var triggerBtn = $(this);

                editorForm.attr('action',triggerBtn[0].dataset.href);

                $('#editor_name').val(triggerBtn.parents('tr').find('.f-name').text().trim());
//                $('#editor_remark').val(triggerBtn.parents('tr').find('.f-remark').text().trim());
            });
        }(window.jQuery);
    </script>
    <script>
        $('#sort_table').dataTable({
            // 按原始数据初始化
            aaSorting: [],
            // 指定需要排序的列
            aoColumns: [
                null,
                null,
                null,
                { "bSortable": false },
            ],
            "aLengthMenu": [
                [5, 10, 20, -1],
                [5, 10, 20,"全部"] // change per page values here
            ],
            oLanguage : {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }
        });
        $('.dataTables_length select').select2();
    </script>
@endsection


@section('pluginInit')
    FormSamples.init();
    {{--FormComponents.init();--}}
@endsection
